<template>
  <div class="shouye">
    <!-- <p>这是首页1</p> -->
    <cateHeader></cateHeader>
    <lun-bo-tu></lun-bo-tu>
    <div class="nav_01">
      <ul class="ulbox">
        <li v-for="(item, index) of fmcmList" :key="index">
          <img :src="item.image_src" alt="" />
        </li>
      </ul>
    </div>
    <div class="loucengList" v-for="(item2, index) of floorList" :key="index">
      <div class="nav_02">
        <img :src="item2.floor_title.image_src" />
      </div>
      <div class="nav_03">
        <div><img :src="item2.product_list[0].image_src" alt="" /></div>
        <ul>
          <li><img :src="item2.product_list[1].image_src" alt="" /></li>
          <li><img :src="item2.product_list[2].image_src" alt="" /></li>
          <li><img :src="item2.product_list[3].image_src" alt="" /></li>
          <li><img :src="item2.product_list[4].image_src" alt="" /></li>
        </ul>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <Nav></Nav>
    <div id="nav"></div>
  </div>
</template>
  
<script>
//导航栏组件
import Nav from "../navbar.vue";
import cateHeader from "../../components/category/cateHeader.vue";
import LunBoTu from "@/components/lunBoTu.vue";
import axios from "axios";

export default {
  name: "Home",
  data() {
    return {
      fmcmList: [], // 分类导航数组
      floorList: [], // 楼层数组

    };
  },
  created() {
    //生命周期函数之初始阶段，创建vue实例后自动调用
    this.getFmcmshuju();
    this.getLoucengshuju()
  },
  methods: {
    getFmcmshuju() {
      axios
        .get("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems")
        .then((response) => {
          if (response.data.meta.status === 200) {
            this.fmcmList = response.data.message; //如果response.data.meta.status === 200，那就是请求成功了，随后 将请求结果保存到组件的 data 中
          }
        })
        .catch((error) => {
          console.log(error);//如果失败，控制台报这个错
        });
    },
    getLoucengshuju() {
      axios
        .get("https://api-hmugo-web.itheima.net/api/public/v1/home/floordata")
        .then((response) => {
          if (response.data.meta.status === 200) {
            this.floorList = response.data.message; // 将请求结果保存到组件的 data 中
          }
          console.log(response.data.message);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

  // 注册组件
  components: {
    Nav,
    cateHeader,
    LunBoTu,
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.shouye {
  padding-bottom: 80px;
}
.nav_01 {
  background-color: white;
}
.nav_02 img {
  height: 37px;
  width: 100%;
}
.nav_03 {
  display: flex;
  background-color: rgb(255, 255, 255);
  padding: 8px 5px 0;
}
.nav_03 > div {
  width: 130%;
  height: 250px;
}
.nav_03 div img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

/* .nav_03 ul  {
  width: 238px;
  height: 250px;

} */
.nav_03 ul li {
  width: 49%;
  height: 49%;
}
.nav_03 ul li:nth-child(n + 3) {
  margin-top: 4px;
}
.nav_03 li img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.nav_03 ul {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-left: 6px;
}
.ulbox {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}

.nav_03 ul li:nth-child(2n-1) {
  margin-right: 4px;
}
ul li img {
  width: 60px;
  height: 65px;
}
</style>